<template>
    <div class="common-layout">
        <el-row>
            <el-select v-model="state.selected" class="m-2" placeholder="日期" @change="change" size="large">
                <el-option v-for="item in state.options" :key="item" :label="item" :value="item">
                    {{ item }}
                </el-option>
            </el-select>

            <el-select v-model="state.industrySelected" class="m-2" placeholder="行业" 
            filterable
            @change="industryChange"
            size="large">
                <el-option v-for="item in state.industryTags" :key="item" :label="item" :value="item" />
            </el-select>

            <el-text> 数量：{{ state.data.length }} </el-text>
            <el-button @click="multi()">multi</el-button>
        </el-row>

        <el-row>
            <el-table :data="state.data" height="700" 
            :cell-class-name="tableCellClassName"
            @sort-change="sortChange"
            @cell-click="industryClick"
            :default-sort="state.sort"
            style="width: 100%">
                <el-table-column prop="date" label="日期" width="210" />
                <el-table-column prop="category" label="类别" width="100"/>
                <el-table-column v-if="state.category == '股票'" prop="industry" label="行业" sortable width="140"/>
                <el-table-column prop="stock" label="股票" width="140">
                    <template #default="scope">
                        <ToStockDetail :stock="scope.row.stock" />
                    </template> 
                </el-table-column>
                <el-table-column prop="display" label="display" width="140">
                    <template #default="scope">
                        <ToDisplay :stock="scope.row.stock" :date="scope.row.date" :content="'d'"/>
                        <ToMeanLine :stock="scope.row.stock" :date="scope.row.date" :content="'m'"/>
                    </template>
                </el-table-column>
                <el-table-column prop="close" label="价格" width="120"/>
                <el-table-column prop="drawdown" label="drawdown" sortable width="120" />
                <el-table-column prop="lp" label="分位点" sortable width="100" />
                <el-table-column prop="relLP" label="相对分位点" sortable width="100" />
                <el-table-column prop="incNum" label="连续上涨" sortable width="80" />
                <el-table-column prop="pctSum" label="涨跌和" sortable width="100" >
                    <template #default="scope">
                        {{ scope.row.pctSum && (scope.row.pctSum).toFixed(2) }}
                    </template>
                </el-table-column>
                <el-table-column prop="weekPct" label="周涨跌" sortable  width="80"/>
                <el-table-column prop="nextWeekPct" label="下周涨跌" sortable  width="80"/>
                <el-table-column prop="gb20wPct" label="20周线" sortable  width="100" />
                <el-table-column prop="gb30wPct" label="30周线" sortable  width="100" />
                <el-table-column prop="disPct" label="60周线"  sortable width="100" />
                <el-table-column prop="disDuration" label="disDuration"  sortable width="80" />
            </el-table>
        </el-row>
    </div>
</template>

<script setup>
import { reactive } from 'vue';
import { getWeekPctStat } from '../service/week'
import ToStockDetail from './ToStockDetail.vue';
import { getIndexETFName,getLpClassName, getSessionStorage, setSessionStorage } from '../utils/help';
import { useRouteQuery } from '../utils/useRoute';
import ToDisplay from './element/ToDisplay.vue';
import { openNewTableMulti } from '../router';
import ToMeanLine from './element/ToMeanLine.vue';

const base = "WeekPctStat"
const selectKey = base + "Select"
const industrySelectKey = base + "Industry" + "Select"
const sortPropKey = base + "SortProp"
const sortOrderKey = base + "SortOrder"

const state = reactive({
    rawData: [],
    category: "ETF",
    data : [],
    search: "",
    stocks : [],
    options: [],
    industryTags: new Set(),
    industrySelected: getSessionStorage(industrySelectKey) || "全部",
    selected: getSessionStorage(selectKey) || "",
    sort: { 
        prop: getSessionStorage(sortPropKey) || 'weekPct' , 
        order: getSessionStorage(sortOrderKey) || 'ascending' 
    }
})

// 网址传参
let stocks = useRouteQuery("stocks","")
if (stocks) {
    state.stocks = stocks.split(";")
}
state.category = useRouteQuery("category","ETF")
state.search = useRouteQuery("search","")


const loadData = (selected) => {
    getWeekPctStat(selected).then( res => {
        state.rawData = filter(res.data.data)
        state.options = res.data.weeks
        if (!selected) {
            state.selected = state.options[0]
        }

        state.data = state.rawData
        state.industryTags.add("全部")
        state.data.forEach(item => {
            state.industryTags.add(item.industry)
        })
        industryChange()
    })
}

loadData(state.selected)

const filter = (data) => { 
    if (state.stocks.length > 0) {
        data = data.filter(item => state.stocks.includes(item.stock))
    } else if (state.category) {
        data = data.filter(item => item.category == state.category)
    }

    if (!state.search) {
        return data
    }
    let op = state.search.split(";")
    if (["incNum", "pctSum"].includes(op[0])) {
        if (op[1] == "gt") {
            return data.filter(item => item[op[0]] >= op[2])
        } else if (op[1] == "lt") {
            return data.filter(item => item[op[0]] <= -1 * op[2])
        }
    }

    return data
}

const sortChange = (column, prop, order) => {
    setSessionStorage(sortPropKey, column.prop)
    setSessionStorage(sortOrderKey, column.order)
}

const change = () => {
    setSessionStorage(selectKey, state.selected)
    loadData(state.selected)
}

const industryChange = () => {
    if (state.industrySelected == "全部") {
        state.data = state.rawData
    } else {
        state.data = state.rawData.filter(item => item.industry == state.industrySelected)
    }
    setSessionStorage(industrySelectKey, state.industrySelected)
}

const industryClick = (row, column, cell, event) => {
    var columnProperty = column.property
    if (columnProperty == "industry") {
        // 还原
        if (state.industrySelected === row.industry) {
            state.industrySelected = "全部"
        } else {
            state.industrySelected = row.industry
        }
        industryChange()
    }
}

const multi = () => {
    let stocks = []
    state.data.forEach(item => {
        stocks.push(item.stock)
    })
    openNewTableMulti(stocks.slice(0, 50)) // 限制最多数量
}

const tableCellClassName = ({row, column, rowIndex, columnIndex}) => {
    var columnProperty = column.property
    if ((columnProperty == "lp")) {
        return getLpClassName(row.lp)
    }

    if (columnProperty == "relLP") {
        if (row["relLP"] <= 1) {
            return 'rellplt1-cell'
        }
    }

    if (["weekPct", "nextWeekPct"].includes(columnProperty)) {
        if (row[columnProperty] < 0) {
            return 'lt0-cell'
        }
    }


    if (["w15DisPct", "disPct","gb20wPct","gb30wPct"].includes(columnProperty)) {
        if (row[columnProperty] >= 0) {
            return 'd300up-cell'
        } else {
            return 'd300down-cell'
        }
    }

    if (getIndexETFName().includes(row.stock)) {
        return 'lp-warning-row'
    }

    return ''
}
</script>

<style>
</style>